<template>
  <div>
    <el-button
      type="success"
      plain
      icon="edit"
      @click="showDialog"
      :disabled="selection.length !== 1"
      :loading="buttonLoading"
    >
      修改
    </el-button>
    <el-dialog
      title="修改部门"
      v-model="dialogVisible"
      width="30%"
      style="border-radius: 10px; padding: 5px 10px"
    >
      <el-form
        label-position="right"
        label-width="80px"
        :model="commitForm"
        :rules="rules"
        ref="ruleFormRef"
        status-icon
      >
        <el-form-item label="上级部门">
          <el-tree-select
            v-model="commitForm.parentId"
            ref="treeRef"
            style="width: 100%"
            :data="deptData"
            node-key="id"
            check-strictly
            :props="defaultProps"
          >
            <template #default="{ data }">
              <span class="menu">
                <span style="margin-right: 10px">{{ data.deptName }}</span>
                <el-tag :type="levelType(data.level)" size="small">
                  {{ levelTest(data.level) }}
                </el-tag>
              </span>
            </template>
          </el-tree-select>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input
            v-model="commitForm.deptName"
            placeholder="部门名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="commitForm.state">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="commitForm.remark" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
          <el-button @click="resetForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { getDeptInfo, updateDept, getDeptTree } from "@/service/api/dept";
import eventBus from "@/utils/event-bus";
import rules from "@/utils/rules";

const ruleFormRef = ref();
const treeRef = ref();
const buttonLoading = ref(false);
const dialogVisible = ref(false);
const deptData = ref([]);
const defaultProps = {
  label: "deptName",
};
const commitForm = ref({
  parentId: 1,
  parentLevel: 1,
  deptName: "",
  level: "",
  state: 1,
  remark: "",
});

const props = defineProps({
  selection: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["getDeptTree"]);

const showDialog = async () => {
  if (props.selection.length === 1) {
    deptData.value = await getDeptTree();
    eventBus.emit("updateDeptId", { id: props.selection[0].id, pL: null });
    const data = await getDeptInfo(props.selection[0].id);
    commitForm.value = data;
    dialogVisible.value = true;
  }
};

//提交表单
const submitForm = (formEl) => {
  formEl.validate(async (valid) => {
    if (valid) {
      await updateDept(commitForm.value, props.selection[0].id);
      resetForm();
      emit("getDeptTree");
    } else {
      return false;
    }
  });
};

//重置表单内容
const resetForm = () => {
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};

const levelType = (level) => {
  if (level === 1) return "";
  else if (level === 2) return "success";
  else if (level === 3) return "warning";
  else return "danger";
};

const levelTest = (level) => {
  if (level === 1) return "一级";
  else if (level === 2) return "二级";
  else if (level === 3) return "三级";
  else return "四级";
};

watch(
  () => commitForm.value.parentId,
  () => {
    if (treeRef.value) {
      //设置当前选中上级部门的级别
      commitForm.value.parentLevel = treeRef.value.getNode(
        commitForm.value.parentId
      ).data.level;

      eventBus.emit("updateDeptId", {
        id: props.selection[0].id,
        pL: commitForm.value.parentLevel,
      });

      ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
    }
  }
);
</script>
<style lang="scss">
.menu {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
</style>
